﻿// capas del mapa
var overlaysMapa = [];

// Variable que representa un objeto mapa de GoogleMaps
var map = null;

var configs = {
    mapDivId   : 'divMapa',
    mapType     : google.maps.MapTypeId.ROADMAP
}

/**
 * Carga el mapa de GoogleMaps en la pagina
 */
function loaddMapa() {
    var mapOptions = {
        center: new google.maps.LatLng(-33.91000, -56.159062),
        zoom: 8,
        mapTypeId: configs.mapType,

        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT
        },

        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },

        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },

        streetViewControl: false

    };
    map = new google.maps.Map(document.getElementById(configs.mapDivId), mapOptions);
};

/**
 * Limpia todas las capas del mapa
 */
function clearOverlays() {
    var i = overlaysMapa.length;
    while (i--) {
        var overlay = overlaysMapa[i];
        if (overlay) overlay.setMap(null);
        delete overlaysMapa[i];
    }
}




/********************************************************************
 *  CONTROL DE BUSQUEDA DE CIUDADES                                 *
 ********************************************************************/


/**
 * The SearchcityControl adds a control to the map that simply
 * allow for searching cities. When a city is searched this 
 * control adds a marker to the map and get the current weather
 * @constructor
 */
function SearchCityControl(controlDiv, map) {

  
    // Creo un div para contener el campo de busqueda
    var controlUI = document.createElement('div');
    $(controlUI).addClass('inputWrapper');

    // agrego el input
    var searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.id = 'autocompleteCiudad';
    controlUI.appendChild(searchInput);

    // creo el autocomplete en el input
    $(searchInput).autocomplete({
        source: function (request, response) {
            // hago una llamada al metodo de la clase para obtener los datos filtrados
            $.ajax({
                type: "POST",
                url: "PortalWeb.aspx/FiltrarCiudades",
                data: "{term:'" + request.term + "'}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    // cuando obtengo los resultados tranformo a json y paso al autocomplete
                    var jsondata = $.parseJSON(data.d);
                    response(jsondata.terms);
                }
            });            
        },
        select: function (event, ui) {
            clearOverlays();
            citySelected(ui.item.label);
            loadNoticias(ui.item.label)
        }
    });
    
    // lo agrego al contenedor
    controlDiv.appendChild(controlUI);

}

/**
 * Hace una llamada con el nombre de la ciudad y muestra los datos del tiempo para dicha ciudad
 */
function citySelected(cityName) {
    // hago una llamada al metodo de la clase para obtener los datos filtrados
    $.ajax({
        type: "POST",
        url: "PortalWeb.aspx/ObtenerCiudadData",
        data: "{selectedCity:'" + cityName + "'}",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            // cuando obtengo los resultados tranformo a json y paso al que se encarga de mostrar los datos climaticos
            var cityData = $.parseJSON(data.d);
            showClimaticData(cityData);
        }
    });
}


function showClimaticData(cityData) {
    // limpio el campo de busqueda
    $('#autocompleteCiudad').val('');

    // obtengo la abreviacion del pais en dos letras, ej UY
    var countryAbbrev = cityData.country;
    // nombre de la ciudad
    var cityName = cityData.cityName;
    //coordenadas
    var lon = cityData.lon;
    var lat = cityData.lat;

    var bounds = new google.maps.LatLngBounds();

    // creo un marker en el punto 
    var latlon = new google.maps.LatLng(lat, lon);
    bounds.extend(latlon);

    // creo un nuevo marker para la ciudad seleccionada
    var marker = new google.maps.Marker({
        position: latlon,
        map: map,
        title: 'El tiempo para ' + cityName
    });

    // agrego el marker para luego poder borrarlo
    overlaysMapa.push(marker);

    // agrego la informacion del tiempo al marker
    var wheaterInfo = getWheaterInfoWindow(cityData);
    //marker.infoWindow = wheaterInfo;

    // centro el mapa en el marker
    map.setCenter(latlon);
    google.maps.event.addListener(marker, 'click', function () {
        //wheaterInfo.setContent(this.title);
        wheaterInfo.open(map, this);
    });
    //wheaterInfo.open(map);
    map.setZoom(7);

}

function getWheaterInfoWindow(cityData) {
    var htmlContent = 'No fue posible obtener los datos del tiempo';
    try {
        var fecha = cityData.weather.date;
        var skycode = cityData.weather.skycode;
        var skytext = cityData.weather.skytext;
        var temperature = cityData.weather.temperature;
        var feelslike = cityData.weather.feelslike;
        var humidity = cityData.weather.humidity;
        var winddisplay = cityData.weather.winddisplay;

        var htmlContent = '<div class="currentconditions">';
        htmlContent += '	<h3 class="center">';
        htmlContent += '	    Tiempo actual en ' + cityData.cityName;
        htmlContent += '	</h3>';
        htmlContent += '	<div class="currentdetails">';
        htmlContent += '		<div class="fst">';
        htmlContent += '			<div class="image">';
        htmlContent += '				<img src="styles/images/' + skycode + '.gif" alt="' + skytext + '" height="45" width="55" title="' + skytext + '"/>';
        htmlContent += '			</div>';
        htmlContent += '			<div class="fstConditions">';
        htmlContent += '				<span class="curtemp">' + temperature + '°C</span>';
        htmlContent += '				<span class="clear">' + skytext + '</span>';
        htmlContent += '			</div>';
        htmlContent += '		</div>';
        htmlContent += '		<div class="secondConditions"><span class="bold">Sensación:</span> ' + feelslike + '°C</div>';
        htmlContent += '		<div class="secondConditions"><span class="bold">Humedad:</span> ' + humidity + '%</div>';
        htmlContent += '		<div class="secondConditions"><span class="bold">Viento:</span> ' + winddisplay + '</div>';
        htmlContent += '	</div>';
        htmlContent += '</div>';

    }catch (error){
        // nothing to do
    }

    weatherInfoWindow = new google.maps.InfoWindow({
        content: htmlContent
    });

    return weatherInfoWindow;
}


/********************************************************************
 *  CONTROL DE NOTICIAS                                             *
 ********************************************************************/

function NewsControl(newsWrapper) {

    // Creo un div para contener el título de las noticias
    var newsUI = document.createElement('div');
    $(newsUI).addClass('newsWrapper');

    // agrego un titulo para poner las noticias
    var title = $('<span>Noticias</span>');
    var divTitle = document.createElement('div');
    divTitle.id = "titleNoticias";
    divTitle.appendChild(title[0]);
    newsUI.appendChild(divTitle);

    // agrego div para mostrar las noticias
    newsDiv = document.createElement('div');
    newsDiv.id = 'newsHolder';
    newsUI.appendChild(newsDiv);
    
    // agrego las noticias al contenedor en el mapa
    newsWrapper.appendChild(newsUI);

}


function loadNoticias(cityName) {

    if (cityName == null) {
        placeNoNews();
    } else {

        // obtengo las noticias para la ciudad
        $.ajax({
            type: "POST",
            url: "PortalWeb.aspx/ObtenerNoticiasCiudad",
            data: "{selectedCity:'" + cityName + "'}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                // cuando obtengo los resultados tranformo a json y paso al que se encarga de mostrar los datos climaticos
                var newsData = $.parseJSON(data.d);
                placeNews(newsData);
            }
        });
    }
}

function placeNoNews() {
    // quito el contenido del div de noticias
    $(newsDiv).empty();

    // creo un texto indicando que no hay noticias para mostrar
    var noNews = $('<span>No hay noticias para mostrar</span>')[0]
    var notDiv = document.createElement('div');
    $(notDiv).addClass('noticia');
    notDiv.appendChild(noNews);

    newsDiv.appendChild(notDiv);
}

/**
 * Para cada noticia en formato json arma el html para mostrarla
 * en el div de noticias
 */
function placeNews(jsonNews) {
    // quito el contenido del div de noticias
    $(newsDiv).empty();

    var newsArray = jsonNews.noticias;
    if (newsArray.length == 0) {
        placeNoNews();
    } else {
        for (index = 0; index < newsArray.length; ++index) {

            // armo el html para la noticia
            var noticia = newsArray[index].noticia;

            // creo el div de la noticia completa
            var notDiv = document.createElement('div');
            $(notDiv).addClass('noticia');

            // creo el titulo
            var titulo;
            if (noticia.titulo.length > 20) {
                titulo = noticia.titulo.substring(0, 20);
                titulo = titulo.trim() + "...";
            } else {
                titulo = noticia.titulo;
            }

            var notTitleSpan = $('<span>' + titulo + '</span>')[0];
            var notTitle = document.createElement('div');
            $(notTitle).addClass('tituloNoticia');
            notTitle.appendChild(notTitleSpan);

            // creo la fecha de la noticia
            var notDateSpan = $('<span>' + noticia.fecha + '</span>')[0];
            var notDate = document.createElement('div');
            $(notDate).addClass('fechaNoticia');
            notDate.appendChild(notDateSpan);

            // creo la descripcion de la noticia
            var notDescripcion = $('<div>' + noticia.descripcion + '</div>')[0];
            $(notDescripcion).addClass('descripcion');

            // armo la noticia con las tres partes
            notDiv.appendChild(notTitle);
            notDiv.appendChild(notDate);
            notDiv.appendChild(notDescripcion);

            // lo agrego a la lista de noticias
            newsDiv.appendChild(notDiv);

        }
    }
}


/********************************************************************
 *  INIT                                                            *
 ********************************************************************/

$(document).ready(function () {
    // tomo todo el largo de la pagina
    $('#divMapa').height($(window).height()-17);

    // cargamos el mapa cuando este listo el DOM
    loaddMapa();

    // creo un contenedor para el control de busqueda
    var searchDiv = document.createElement('div');
    searchDiv.id = 'divBusqueda';
    var searchControl = new SearchCityControl(searchDiv, map);
    // agrego el control de busqueda en el mapa
    searchDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchDiv);


    var newsDiv = document.createElement('div');
    newsDiv.id = 'divNoticias';
    var newsControl = new NewsControl(newsDiv);

    newsControl.index = 1;
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(newsDiv);


    loadNoticias(null);

});